
<!--上册面包屑-->
<template>

    <header>

        <div class="l-content">
            <!--面包屑导航按钮-->
            <el-button type="plain" icon="el-icon-menu" size="min" class="el-button" @click="collapseMenu"></el-button>
            <!--面包屑导航-->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item  :to="current.path" v-if="current">
                    {{current.label}}

                </el-breadcrumb-item>

            </el-breadcrumb>

            <div style="margin-left: 750px; color: aqua"><h1>湖中大撸码团队</h1></div>
        </div>

        <div class="r-content">
            <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">
          <!--用户头像-->

       <img :src="userImg" class="user" style="margin-top: 0px" />
      </span>

                <el-dropdown-menu slot="dropdown" size="min"  >
                    <el-dropdown-item  command="a">个人中心</el-dropdown-item>
                    <el-dropdown-item  command="b">退出</el-dropdown-item>

                </el-dropdown-menu>
            </el-dropdown>

            <!--右侧弹框-->



            <el-drawer
                    title="我的商铺"
                    :visible.sync="drawer"
                    :with-header="false">
                <span><el-button @click="skiptest" >商铺</el-button></span>
            </el-drawer>
        </div>
        <el-button @click="drawer = true" type="primary" >
            我的商铺
        </el-button>
    </header>

</template>


<script>
    import {mapState} from  'vuex'
    export default {
        name: "CommonHeader",
        props:{
          user:String
        },
        computed:{
            ...mapState({
                current: state => state.tab.currentMenu
            })
        },
        data(){
            return{
                drawer:false,
                userImg:require("../assets/user.png")
            }
        },
        methods:{

            skiptest(){
              console.log("safsafsafs")
                this.$router.push( {path : "/index"})
            },
            collapseMenu(){
                this.$store.commit('collapseMenu')
            },
            handleCommand(command) {

                switch (command) {
                    case 'a':
                        this.$router.push({path:'/mine'})
                        break
                    case 'b':
                        this.$router.push({path:'/'})
                        break
                }
            },



        }
    }



</script>

<style scoped>
    header{
        display: flex;
        align-items: center;
        height: 100%;
        justify-content: space-between;
    }
    .l-content{
        display: flex;
        align-items: center;

    }
    .el-button{
        margin-right: 20px;
    }
    .user{
        width: 44px;
        height: 44px;
        border-radius: 50%;
    }
</style>
<style lang="css">

    .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
        color: #79a6ff;
    }

</style>